const path = require("path");
const webpack = require("webpack");
const htmlwebpackplugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  mode: "development",
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: "src",
    hot: true
  },
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=99&name=[hash:32]-[name].[ext]"
      },
      { test: /\.(ttf|woff2|woff|eot|svg)$/, use: "url-loader" },
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      { test: /\.vue$/, use: "vue-loader" }
    ]
  },
  resolve: {
    alias: {
      // "vue$":"vue/dist/vue.esm.js"
    }
  },
  plugins: [
    new htmlwebpackplugin({
      // 打包输出HTML
      // title: 'Hello World app',
      // minify: { // 压缩HTML文件
      //   removeComments: true, // 移除HTML中的注释
      //   collapseWhitespace: true, // 删除空白符与换行符
      //   minifyCSS: true// 压缩内联css
      // },
      filename: "index.html",
      template: path.join(__dirname, "./src/index.html")
    }),
    new webpack.HotModuleReplacementPlugin(),
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
};
